{% extends 'base.html' %}

{% block title %}视频详细内容{% endblock %}

{% block head %}
    <!-- 添加 Bootstrap 4 的 CSS 链接 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        .video-details {
            margin-top: 50px;
        }

        .comments-container {
            height: 200px; /* 设置评论区的高度 */
            overflow: hidden; /* 隐藏溢出内容 */
            position: relative; /* 相对定位 */
        }

        .comments-scroll {
            position: absolute; /* 绝对定位 */
            top: 0; /* 从顶部开始 */
            width: 100%; /* 宽度100% */
            animation: scrollComments 20s linear infinite; /* 滚动动画 */
        }

        .comments-scroll p {
            margin: 0; /* 去除段落的外边距 */
            padding: 10px; /* 添加内边距 */
        }

        @keyframes scrollComments {
            0% {
                top: 0;
            }
            /* 从顶部开始 */
            100% {
                top: -100%;
            }
            /* 移动到顶部上方 */
        }

        .btn-group {
            margin-top: 20px;
        }
    </style>
{% endblock %}

{% block body %}
    <div class="container">
        <div class="row justify-content-center video-details">
            <div class="col-md-6">
                <h2>{{ video.video_name }}</h2>
                <ul class="list-group">
                    <li class="list-group-item">播放量: {{ video.views }}</li>
                    <li class="list-group-item">弹幕数: {{ video.danmaku }}</li>
                    <li class="list-group-item">收藏数: {{ video.favorite }}</li>
                    <li class="list-group-item">点赞数: {{ video.like }}</li>
                    <li class="list-group-item">硬币数: {{ video.coin }}</li>
                    <li class="list-group-item">分享数: {{ video.share }}</li>
                    <li class="list-group-item">评论数: {{ video.comment_count }}</li>
                    <li class="list-group-item">视频预警策略:
                        <select id="alertType">
                            <option value=0 {% if video.alert_standard == 0 %}selected{% endif %}>歧视言论</option>
                            <option value=1 {% if video.alert_standard == 1 %}selected{% endif %}>嘲讽言论</option>
                            <option value=2 {% if video.alert_standard == 2 %}selected{% endif %}>综合</option>
                        </select>
                    </li>
                    <li class="list-group-item">视频预警阈值:
                        <input type="text" id="alertRate" value="{{ video.alert_rate }}">
                    </li>
                </ul>
                <div class="btn-group">
                    <button class="btn btn-primary" onclick="detail_wordcount()">查看暴力词云</button>
                    <button class="btn btn-primary" onclick="detail_line()">查看评论增长图</button>
                </div>
                <p class="mt-3">最后评论时间: {{ video.last_comment_time }}</p>
            </div>
            <div class="col-md-6">
                <h3>评论</h3>
                <div class="comments-container">
                    <div class="comments-scroll">
                        {% for comment in comments %}
                            <p>{{ comment }}</p>
                        {% endfor %}
                    </div>
                </div>
                <h3 class="mt-3">涉及暴力的评论</h3>
                <div class="comments-container">
                    <div class="comments-scroll">
                        {% for violent_comment in violent_comments %}
                            <p>{{ violent_comment }}</p>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script>
        // 点击按钮后跳转到相应页面
        function detail_wordcount() {
            const video_url = '/analysis/detail_wordcount/{{ video.bvid }}';
            window.location.href = video_url;
        }

        function detail_line() {
            const video_url = '/analysis/detail_line/{{ video.bvid }}';
            window.location.href = video_url;
        }

        document.getElementById("alertType").addEventListener("change", function () {
            // 获取视频的 ID
            var video_bvid = '{{ video.bvid }}';

            // 获取修改后的标准
            var alert_standard = this.value;

            // 构建要发送的数据对象
            var data = {
                video_bvid: video_bvid,
                alert_standard: alert_standard
            };
            $.ajax({
                type: 'POST',
                url: '/alert/change',
                data: JSON.stringify(data),
                contentType: 'application/json',
                success: function (response) {
                    // 请求成功，可以在这里处理返回的数据
                    console.log(response);
                    alert('修改成功')
                },
                error: function (xhr, status, error) {
                    // 请求失败，处理错误
                    console.error('Request failed. Status: ' + status);
                }
            });
        })

        document.getElementById("alertRate").addEventListener("change", function () {
            // 获取视频的 ID
            var video_bvid = '{{ video.bvid }}';

            // 获取修改后的标准
            var alert_rate = this.value;

            // 构建要发送的数据对象
            var data = {
                video_bvid: video_bvid,
                alert_rate: alert_rate
            };
            $.ajax({
                type: 'POST',
                url: '/alert/change',
                data: JSON.stringify(data),
                contentType: 'application/json',
                success: function (response) {
                    // 请求成功，可以在这里处理返回的数据
                    console.log(response);
                    alert('修改成功')
                },
                error: function (xhr, status, error) {
                    // 请求失败，处理错误
                    console.error('Request failed. Status: ' + status);
                }
            });
        })


    </script>
{% endblock %}

